<template lang="">
    <div>
        <el-table :data="analysesResult" border style="width: 70%">
            <el-table-column prop="option" label="选项">
            </el-table-column>
            <el-table-column prop="count" label="小计" width="180">
            </el-table-column>
            <el-table-column prop="percent" label="所占比例" width="180">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: 'AnalysesTable',
        data() {
            return {
                analysesResult:[
                    {
                        option:'',
                        count:'',
                        percent:''
                    }
                ]
            }
        },
        props:['item'],
        watch:{
            item:{
                handler(newValue){
                    console.log('item',newValue);
                let list = []
                let all = 0
                for(let i in newValue.option){
                    all += newValue.option[i].value
                }
                for(let i in newValue.option){
                    list.push({
                        option:newValue.option[i].name,
                        count:newValue.option[i].value,
                        // percent:(Math.floor((newValue.option[i].value*100) / all) + '%')     //向下取整，不好看，弃用
                        percent:(((newValue.option[i].value * 100) / all).toFixed(2) + '%')
                    })
                }
                // console.log('list',list);
                this.analysesResult = list
                },
                immediate:true
            },

        }
    }
</script>
<style scoped>
    .el-table{
        margin: 0 auto;
    }
</style>